.hero {
  $large-screen: 50em !default;
  align-items: center;
  background: image-url("background-image.png");
  background-position: right;
  background-size: none;
  display: flex;
  justify-content: center;
  min-height: 25em;
  padding: 2em;

  @include media($large-screen) {
    background-position: left;
    background-size: cover;
    justify-content: flex-end;
  }

  .hero-content {
    max-width: 20em;
    text-align: center;

    @include media($large-screen) {
      text-align: left;
    }
  }

  .hero-logo {
    margin: auto;
  }
}
